<template>
    <div class="page-demo-table-base">
        <div class="main-page-content">
            <ContentHeader title="这里是通用的列表页面" explain="该列表页，包含多条件查询，分页，添加，以及批量操作，且包含弹框式子页面(且支持全屏，实现重叠式单页模拟)；">

            </ContentHeader>

            <div class="page-content">
                <div class="table-page-search-wrapper">
                    <a-form-model layout="horizontal"
                        ref="searchForm"
                        :model="search_data"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 18, }">

                        <a-row :gutter="48">
                            <a-col :md="8" :sm="24">
                                <a-form-model-item ref="order_sn" label="订单编号" prop="order_sn">
                                    <a-input v-model="search_data.order_sn" placeholder=""/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-model-item label="订单状态" style="width:100%;">
                                    <a-select v-model="search_data.status" placeholder="请选择" default-value="0" style="width:100%;">
                                        <a-select-option value="0">全部</a-select-option>
                                        <a-select-option value="1">关闭</a-select-option>
                                        <a-select-option value="2">正常</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <template v-if="search_more">
                                <a-col :md="8" :sm="24">
                                    <a-form-model-item label="支付单号">
                                        <a-input-number v-model="search_data.pay_sn" style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :md="8" :sm="24">
                                    <a-form-model-item label="下单日期">
                                        <a-date-picker v-model="search_data.create_date" style="width: 100%" placeholder="请输入更新日期"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :md="8" :sm="24">
                                    <a-form-model-item label="退款状态">
                                        <a-select v-model="search_data.repay_status" placeholder="请选择" default-value="0" style="width:100%;">
                                            <a-select-option value="0">全部</a-select-option>
                                            <a-select-option value="1">未申请</a-select-option>
                                            <a-select-option value="2">已申请未退款</a-select-option>
                                            <a-select-option value="3">已申请已退款</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :md="8" :sm="24">
                                    <a-form-model-item label="退货状态">
                                        <a-select placeholder="请选择" v-model="search_data.rebuy_status"  default-value="0" style="width:100%;">
                                            <a-select-option value="0">全部</a-select-option>
                                            <a-select-option value="1">未申请</a-select-option>
                                            <a-select-option value="2">已申请未退货</a-select-option>
                                            <a-select-option value="3">已申请已退货</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                            </template>
                            <a-col :md="!search_more && 8 || 24" :sm="24">
                                <span class="table-page-search-submitButtons" :style="search_more && { float: 'right', overflow: 'hidden' } || {} ">
                                    <a-button type="primary" @click="buildListData">查询</a-button>
                                    <a-button style="margin-left: 8px" @click="resetForm('searchForm')">重置</a-button>
                                    <a @click="toggleSearchMore" style="margin-left: 8px">
                                        {{ search_more ? '收起' : '展开' }}
                                        <a-icon :type="search_more ? 'up' : 'down'"/>
                                    </a>
                                </span>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </div>

                <a-divider />

                <a-row style="margin-bottom:20px;">
                    <a-col :span="12">
                        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
                    </a-col>
                    <a-col :span="12" style="text-align:right;">
                        <span style="margin-right:15px;font-size:12px;">已选择 {{ selected_rows.length }} 项</span>
                        
                        <a-button @click="handleDelete" :disabled="selected_rows.length<=0" type="danger" icon="delete" style="margin-right:10px;font-size:12px;">批量删除</a-button>
                        <a-button @click="handleDisable" :disabled="selected_rows.length<=0"  type="warning" icon="stop" style="font-size:12px;">批量禁用</a-button>

                    </a-col>
                </a-row>

                <a-table
                    ref="table"
                    :columns="columns"
                    :dataSource="list_data"
                    :pagination="false"
                    :loading="loading_list"
                    :row-selection="rowSelection"
                    rowKey="id"
                >
                    <a slot="name" slot-scope="text">{{ text }}</a>
                    <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
                        <a-input
                            :key="col"
                            v-if="record.editable"
                            style="margin: -5px 0"
                            :value="text"
                            :placeholder="columns[i].title"
                            @change="e => handleChange(e.target.value, record.key, col)"
                        />
                        <template v-else>{{ text }}</template>
                    </template>
                    <template slot="operation" slot-scope="text, record">
                        <template v-if="record.editable">
                            <span v-if="record.isNew">
                                <a @click="saveRow(record)">添加</a>
                                <a-divider type="vertical" />
                                <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                                    <a>删除</a>
                                </a-popconfirm>
                            </span>
                            <span v-else>
                                <a @click="saveRow(record)">保存</a>
                                <a-divider type="vertical" />
                                <a @click="cancel(record.key)">取消</a>
                            </span>
                        </template>
                        <span v-else>
                            <a @click="handleAdd(record.key)">编辑</a>
                        </span>
                    </template>
                </a-table>
            </div>

        </div>
        

        <!-- 子页内容 start -->
        <PageChild title="这是子页面" v-if="show_page_child" @close="closePageChild">
            <template slot="content">
                假装这里是表单，作者懒得写了……
                <div style="height:500px;width:100%;"></div>
                写在最后
            </template>
        </PageChild>
        <!-- 子页内容 start -->
    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
import PageChild from "@/components/page_child/page_child";
export default {
    components:{
        ContentHeader,
        PageChild
    },
    data(){
        return {
            "loading_page":false,

            // 更多查询
            "search_more": false,
            // 搜索表单
            "search_data":{
                "order_sn"  : "",
                "status"    : "",
                "pay_sn"    : "",
                "create_date"   : "",
                "repay_status"  : "",
            },

            // 表单列
            "columns": [
                {   
                    title: '成员姓名',
                    dataIndex: 'name',
                    key: 'name',
                    width: '30%',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title: '工号',
                    dataIndex: 'workId',
                    key: 'workId',
                    width: '30%',
                    scopedSlots: { customRender: 'workId' }
                },
                {
                    title: '所属部门',
                    dataIndex: 'department',
                    key: 'department',
                    width: '30%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'operation' }
                }
            ],
            "list_data": [],
            "loading_list":false,

            // 已选项值
            "selected_row_keys":"",
            // 已勾选项值
            "selected_rows"  : [],


            "show_page_child":false,
        }
    },
    created(){
        this.buildListData();
    },
    methods:{
        // 数据查询
        buildListData(){
            this.loading_list = true;
            setTimeout(()=>{
                this.list_data = [
                    {
                        id: 1,
                        name: '小明',
                        workId: '001',
                        editable: false,
                        department: '行政部'
                    },
                    {
                        id: 2,
                        name: '李莉',
                        workId: '002',
                        editable: false,
                        department: 'IT部'
                    },
                    {
                        id: 3,
                        name: '王小帅',
                        workId: '003',
                        editable: false,
                        department: '财务部'
                    }
                ];
                this.loading_list = false;
            }, 1500);
        },
        // 查询事件
        toggleSearchMore(){
            this.search_more = !this.search_more;
        },

        // 重置表单
        resetForm(form_key="") {
            this.$refs[form_key].resetFields();
        },

        // 表格事件
        handleChange(val, key, col){
            console.log("change:", val, key, col);
        },
        saveRow(record){
            console.log("save:", record);
        },
        remove(key){
            console.log("remove:", key);
        },
        cancel(key){
            console.log("cancel:", key);
        },
        // 点击删除
        handleDelete(){
            var selected_rows = this.selected_rows;
            this.$confirm({
                title: `确认要删除该${selected_rows.length}项吗？`,
                content: '确认删除后将永久删除，不可恢复',
                okText: '删除',
                okType: 'danger',
                cancelText: '取消',
                onOk:()=>{
                    this.$message.success("删除成功");
                },
                onCancel() {
                },
            });
        },
        // 点击禁用
        handleDisable(){
            var selected_rows = this.selected_rows;
            this.$confirm({
                title: `确认要禁用该${selected_rows.length}项吗？`,
                content: '确认禁用后，用户将不能登录系统',
                okText: '禁用',
                okType: 'danger',
                cancelText: '取消',
                onOk:()=>{
                    this.$message.success("禁用成功");
                },
                onCancel() {
                },
            });
        },

        // 点击添加
        handleAdd(){
            this.show_page_child = true;
        },
        // 关闭子页面
        closePageChild(){
            this.show_page_child = false;
        }
        
    },
    computed:{
        rowSelection() {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    this.selected_rows = selectedRows;
                    this.selected_row_keys = selectedRowKeys;
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.id === 1,
                        name: record.name,
                    },
                }),
            };
        },
    }
}
</script>

<style lang="less" scoped>
@import "./base.less";
</style>